<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>woodwhales-file-cloud</title>

  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">

  <!-- mycss -->
  <link rel="stylesheet" href="css/main.css">
  
  <!-- ionicons -->
  <link rel="stylesheet" type="text/css" media="screen" href="plugins/iconic/ionicons.min.css">
  
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">

  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">

  <!-- Ion Slider -->
  <link rel="stylesheet" href="plugins/ion-rangeslider/css/ion.rangeSlider.min.css">

  <!-- bootstrap slider -->
  <link rel="stylesheet" href="plugins/bootstrap-slider/css/bootstrap-slider.min.css">

  <!-- toastr -->
  <link rel="stylesheet" href="plugins/toastr/toastr.min.css">
  
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">
  <!-- 导航栏 -->
  <div th:replace="commons/bar::#top"></div>
  <!-- 侧边栏 -->
  <div th:replace="commons/bar::#side"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) 页面头部 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">独立开源个人网盘</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a th:href="@{/}">主页</a></li>
              <li class="breadcrumb-item active">主仪表盘</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header 页面头部 -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- 使用容量 -->
        <div class="row">
          <div class="col-12">
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">使用容量</h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <div class="row margin">
                  <div class="col-sm-12">
                    <input id="usedSize" type="text" name="usedSize">
                  </div>
                </div>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- 使用容量 -->
        
        <!-- 文件分类统计 -->
        <div class="row">
          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box">
              <span class="info-box-icon bg-info elevation-1"><ion-icon name="document-text-outline"></ion-icon></span>
              <div class="info-box-content">
                <span class="info-box-text">文本类型</span>
                <span class="info-box-number">
                  10
                  <small>%</small>
                </span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-danger elevation-1"><ion-icon name="image-outline"></ion-icon></i></span>
              <div class="info-box-content">
                <span class="info-box-text">图像类型</span>
                <span class="info-box-number">41,410</span>
              </div>
              <!-- /.info-box-content -->
            </div>
          </div>

          <!-- fix for small devices only -->
          <div class="clearfix hidden-md-up"></div>

          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-success elevation-1"><ion-icon name="videocam-outline"></ion-icon></span>

              <div class="info-box-content">
                <span class="info-box-text">视频类型</span>
                <span class="info-box-number">760</span>
              </div>
              <!-- /.info-box-content -->
            </div>
          </div>
          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-warning elevation-1"><ion-icon name="musical-notes-outline"></ion-icon></span>

              <div class="info-box-content">
                <span class="info-box-text">音乐类型</span>
                <span class="info-box-number">2,000</span>
              </div>
              <!-- /.info-box-content -->
            </div>
          </div>
        </div>
        <!-- 文件分类统计 -->

        <!-- Main row -->
		<div class="row">
			<div class="col-12">
				<div class="card">
					<div class="card-header">
						<h3 class="card-title">当前位置：<span id="span-current-path" th:text="${currentPath}"></span></h3>
						<div class="card-tools"><a class="opreate-btn" href="javascript:void(0);" th:data-currentpath="${currentPath}" data-toparent="true" data-opreation='changeDirToParent' th:text="${#strings.equals(currentPath, '/') ? '' : '返回上一级'}"></a></div>				
					</div>
					<!-- 文件列表 -->
					<div class="card-body table-responsive p-0">
						<table class="table table-hover text-nowrap">
							<thead>
								<tr>
									<th>序号</th>
									<th>文件名</th>
									<th>大小</th>
									<th>修改时间</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr th:each="file,fileStat : ${files}" th:data-code="${file.fileCode}" th:data-name="${file.name}" th:data-ionicon="${file.ioniconName}" 
								th:data-path="${file.path}" th:data-isfile="${file.file}" th:data-isdirectory="${file.directory}" th:data-filepath="${file.filePath}">
									<td th:text="${fileStat.index+1}" th:data-dir="true" th:id="'dir-'+${file.fileCode}"></td>
									<td class="opreate-btn" style="cursor:pointer;" data-opreation='preview' th:id="'file-name-div-'+${file.fileCode}">
										<ion-icon th:name="${file.ioniconName}" th:id="'file-ionicon-'+${file.fileCode}"></ion-icon>&nbsp;&nbsp;<span th:text="${file.name}" th:id="'file-name-span-'+${file.fileCode}"></span>
									</td>
									<td th:text="${file.fileSize}">文件大小</td>
									<td><div class="sparkbar" data-color="#00a65a" data-height="20" th:text="${file.updateTime}">文件修改时间</div></td>
									<td>
									   <!-- 下载 -->
									   <ion-icon th:if="${#bools.isTrue(file.file)}" name="cloud-download-outline" class="opreate-btn opreation-class" style="cursor:pointer;" data-opreation='download'></ion-icon>
									   <ion-icon th:if="${#bools.isTrue(file.directory)}" class="opreation-class"></ion-icon>
									   <!-- 分享 -->
									   <ion-icon name="share-social-outline" class="opreate-btn opreation-class" style="cursor:pointer;" data-opreation='share'></ion-icon>
									   <!-- 属性 -->
									   <ion-icon name="alert-circle-outline" class="opreate-btn opreation-class" style="cursor:pointer;" data-opreation='info'></ion-icon>
									   <!-- 编辑 -->
									   <ion-icon name="create-outline" class="opreate-btn opreation-class" style="cursor:pointer;" data-opreation='edit'></ion-icon>
									   <!-- 删除 -->
									   <ion-icon name="trash-outline" class="opreate-btn" style="cursor:pointer;" data-toggle="modal" data-target="#modal-delete" th:onclick="values([[${file.fileCode}]]);"></ion-icon>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<!-- 文件列表 -->
				</div>
				<!-- /.card -->
			</div>
		</div>

      </div><!--/. container-fluid -->
    </section>
  </div>
  <!-- /.content-wrapper -->

  <!-- 页脚 -->
  <div th:replace="commons/bar::#footer"></div>

</div>

<div th:replace="commons/modal::#modal-delete"></div>
<div th:replace="commons/modal::#modal-info"></div>
<!-- ./wrapper -->

<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- overlayScrollbars -->
<script src="plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Ion Slider -->
<script src="plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<!-- ionicons -->
<script src="https://unpkg.com/ionicons@5.0.0/dist/ionicons.js"></script>
<!-- Bootstrap slider -->
<script src="plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
<!-- toastr -->
<script src="plugins/toastr/toastr.min.js"></script>
<!-- OPTIONAL SCRIPTS -->
<script src="dist/js/demo.js"></script>

<!-- PAGE PLUGINS -->
<!-- jQuery Mapael -->
<script src="plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="plugins/raphael/raphael.min.js"></script>
<script src="plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="plugins/jquery-mapael/maps/usa_states.min.js"></script>
<!-- ChartJS -->
<script src="plugins/chart.js/Chart.min.js"></script>

<!-- PAGE SCRIPTS -->
<script src="dist/js/pages/dashboard2.js"></script>
<script src="js/main.js"></script>
</body>
</html>
